<template>
  <a-card style="margin-bottom:20px">
    <template #title>
      APP收费配置
    </template>
    <a-table style="width:700px" bordered row-key="name" :columns="tableColumn" :data-source="tableData"
             :pagination="false"
             :scroll="{x:500}">
      <template #rate="{record,index}">
        <span v-if="inputKey !== index">{{ record.rate }}%</span>
        <a-input v-else v-model:value="record.rate" oninput="value = value.replace(/[^\d.]/g, '');"
                 @blur="updateRate(record,index)" style="width:150px">
          <template #addonAfter>
            %
          </template>
        </a-input>
        <span style="vertical-align: middle;line-height:32px;margin-left: 10px" @click="editRate(index)">  <EditOutlined/></span>
      </template>
    </a-table>
  </a-card>
  <a-card style="margin-bottom:20px">
    <template #title>
      系统消费配置
    </template>
    <a-table style="width:700px" bordered row-key="name" :columns="consumptionColumn"
             :data-source="consumptionTableData"
             :pagination="false"
             :scroll="{x:500}">
      <template #rate="{record,index}">
        <span v-if="consumptionInputKey !== index">
          <span v-if="record.serveFee">{{ record.serveNum }}/笔 {{ record.serveFee }}‰/笔</span>
            <span v-else>{{ record.rate }}</span>
        </span>
        <div v-else>
          <a-input v-if="!record.serveFee" v-model:value="record.rate" oninput="value = value.replace(/[^\d.]/g, '');"
                   @blur="updateConsumptionRate(record,index)" style="width:100px">
            <template #addonAfter>
            </template>
          </a-input>
          <div v-else>
            <a-input v-model:value="record.serveNum" oninput="value = value.replace(/[^\d.]/g, '');"
                     @blur="updateConsumptionRate(record,index)" style="width:50px">
            </a-input>
            /笔
            <a-input v-model:value="record.serveFee" oninput="value = value.replace(/[^\d.]/g, '');"
                     @blur="updateConsumptionRate(record,index)" style="width:50px">
            </a-input>
            ‰/笔
          </div>
        </div>
        <span style="vertical-align: middle;line-height:32px;margin-left: 10px" @click="editConsumptionRate(index)">  <EditOutlined/></span>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import {onMounted, ref} from "vue";
import {EditOutlined} from '@ant-design/icons-vue'

const tableColumn = [
  {
    title: '费用名称',
    dataIndex: 'name',
    width: 200,
    align: 'center'
  },
  {
    title: '缴扣比例',
    dataIndex: 'rate',
    align: 'center',
    slots: {
      customRender: 'rate',
    },
  },
  {
    title: '计算方式',
    dataIndex: 'type',
    width: 200,
    align: 'center',
  },
]
const consumptionColumn = [
  {
    title: '消费类型',
    dataIndex: 'type',
    width: 200,
    align: 'center'
  },
  {
    title: '消费单价',
    dataIndex: 'rate',
    align: 'center',
    slots: {
      customRender: 'rate',
    },
  },
]
import {getFeeConfig, updateFeeConfig, getConsumeConfig, updateConsumeConfig} from "../../api";
import {message} from 'ant-design-vue'

export default {
  name: "index",
  components: {EditOutlined},
  setup() {
    const tableData = ref([])
    const tableKey = ref(null)
    const consumeKey = ref(null)
    const inputKey = ref(null)
    const consumptionInputKey = ref(null)
    const consumptionTableData = ref([])

    async function fetchFeeConfig() {
      const res = await getFeeConfig()
      if (res.code === 1) {
        const {accidentFee, lineUpFee,lineUpFee2,lineUpFee3, loanFee, riskFee, thawFee, withdrawFee, id, dollarFee} = res.data
        tableKey.value = id
        tableData.value = [
          {name: '保证金', rate: loanFee, type: '按合同金额比例', prop: 'loanFee'},
          {name: '解冻费', rate: thawFee, type: '按合同金额比例', prop: 'thawFee'},
          {name: '事故处理费', rate: accidentFee, type: '按合同金额比例', prop: 'accidentFee'},
          {name: '插队费一', rate: lineUpFee, type: '按合同金额比例', prop: 'lineUpFee'},
          {name: '插队费二', rate: lineUpFee2, type: '按合同金额比例', prop: 'lineUpFee2'},
          {name: '插队费三', rate: lineUpFee3, type: '按合同金额比例', prop: 'lineUpFee3'},
          {name: '比索换算美元汇率', rate: dollarFee, type: '按当日业务纯收入比例', prop: 'dollarFee'},
        ]
      }
    }

    // 消费配置查询
    async function fetchConsumeConfig() {
      const res = await getConsumeConfig()
      if (res.code === 1) {
        const {flowFee, serveFee, serveNum, smsFee, id,} = res.data
        consumeKey.value = id
        consumptionTableData.value = [
          {rate: flowFee, type: '流量费',prop:'flowFee'},
          {rate: smsFee, type: '短信',prop:'smsFee'},
          {serveNum, serveFee, type: '收款服务费',},
        ]
      }
    }

    function editRate(key) {
      inputKey.value = key
    }

    async function updateRate(record) {
      if (record.rate) {
        if (record.rate <= 0) {
          return message.error('只能输入大于零的数');
        }
      }
      const params = {
        id: tableKey.value,
      }
      params[record.prop] = record.rate
      const res = await updateFeeConfig(params)
      if (res.code === 1) {
        message.success('编辑成功', 6)
        fetchFeeConfig()
      }
      inputKey.value = null
    }

    function editConsumptionRate(key) {
      consumptionInputKey.value = key
    }

   async function updateConsumptionRate(record) {
      const params = {
        id: tableKey.value,
        serveFee:record.serveFee,
        serveNum:record.serveNum,
      }
     params[record.prop] = record.rate
      const res = await updateConsumeConfig(params)
      if (res.code === 1) {
        message.success('编辑成功', 6)
        fetchConsumeConfig()
      }
     consumptionInputKey.value = null
    }

    onMounted(() => {
      fetchConsumeConfig()
      fetchFeeConfig()
    })
    return {
      inputKey,
      editConsumptionRate,
      updateConsumptionRate,
      consumptionInputKey,
      consumptionColumn,
      tableColumn,
      tableData,
      editRate,
      updateRate,
      consumptionTableData
    }
  }
}
</script>

<style scoped>

</style>
